<template>
	<view class="content z-flex">
		<!--:title="option.navTile"-->
		<navbar isBack title="门店详情">
			<view slot="right" class="mr20" @click="handAdd">
				<text>新增</text>
			</view>
		</navbar>

		<u-swiper :list="swiperList" mode="number" indicator-pos="topRight" height="400" duration="700" />

		<view class="info">
			<view class="z-flex bgc-fff flex-1 p30 mb26" style="border-radius: 12rpx;">
				<view class="_adr z-flex">
					<view class="fs30 fwb">
						<text>{{storeInfo.name}}</text>
					
						<text class="fs24 c-theme">（ID：{{storeInfo.id}}）</text>
					</view>
					<view class="c-999 mt10">{{storeInfo.address}}</view>
				</view>
				<view class="_dh" @click="handDh">
					<image src="/static/images/position.png" mode="" style="width: 36rpx;height: 34rpx;"></image>
					<br />
					<text class="fs24 c-666">导航</text>
				</view>
			</view>

			<template v-if="!datalen">
				<template v-for="(item, index) in roomList">
					<view class="_li z-flex p30" :key="item.id">
						<u-image width="200rpx" height="260rpx" border-radius="12" :src="item.cover"></u-image>
						<view class="_info z-flex">
							<view class="fs32 fwb">{{item.name}}</view>
							<view class="z-flex z-flex-between fs26" style="margin-top: auto;">
								<view>
									<view class="c-theme"><text>可核销次数：</text><text>{{item.writeOff}}</text></view>
									<view class="mt6 c-red">
										<!-- <text class="fs26">￥</text> -->
										<text class="fs36 fwb">{{item.unit}}</text>
										<!-- <text class="ml6">元/次</text> -->
									</view>
								</view>
							</view>
							<view class="z-flex z-flex-end">
								<view v-if="index > 0" class="_move c-theme" @click.stop="moveUp(item, index)">上移</view>
								<view v-if="index < roomList.length - 1" class="_move c-theme" @click.stop="moveDown(item, index)">下移</view>
								<view class="_move" @click.stop="handShowAction(item)">
									操作
								</view>
							</view>
						</view>
					</view>
				</template>
			</template>
		</view>

		<vempty type="data" v-if="datalen" title="暂无数据"></vempty>

		<u-action-sheet safe-area-inset-bottom :list="actionlist" v-model="showAction" @click="handAction"
			border-radius="20"></u-action-sheet>
	</view>
</template>

<script>
	import {
		getOneApi,
		productListApi,
		delProApi,
		addProApi
	} from '@/api/shop.js'
	export default {
		data() {
			return {
				tabData: [{
						name: '营业中',
						value: 1
					},
					{
						name: '新店开业',
						value: 2
					},
					{
						name: '装修中',
						value: 3
					}
				],
				list: [],
				swiperList: [],
				count: 0,
				current: 1,
				datalen: false,
				actionlist: [{
					text: '查看详情',
					type: 1,
					permissions: "detail"
				}, {
					text: '编辑',
					type: 2,
					permissions: "edit"
				}, {
					color: '#ff0000',
					text: '删除',
					subText: '谨慎操作',
					type: 100,
					permissions: "delete"
				}],
				showAction: false,
				curentIndex: 0,
				currentObj: {},
				option: {
					navTile: ''
				},
				storeInfo: {},
				navTile: '',
				roomList: []
			}
		},
		onLoad(option) {
			if (option) {
				this.option = option
			}
		},
		onShow() {
			this.$nextTick(this.getStoreDetail)
		},
		methods: {
			async getStoreDetail() {
				uni.showLoading({title: '加载中'})
				const {code, data} = await getOneApi({
					id: this.option.id
				})
				if(code != 0) return
				this.swiperList = data.img.map(it=>{return {image: it}})
				this.storeInfo = data
				this.getProList(true)
			},
			async getProList(hide = false) {
				if (!hide) uni.showLoading({title: '加载中'})
				const {code, data} = await productListApi({
					businessId: Number(this.option.id)
				})
				if(code != 0) return
				uni.hideLoading()
				this.roomList = data.list
				this.datalen = data.list.length === 0
			},
			async moveUp(row, index){
				const current = this.roomList[index]
				const preve = this.roomList[index - 1]
				const currentSort = current.sort
				const preveSort = preve.sort
				current.sort = preveSort
				preve.sort = currentSort
				Promise.all([addProApi(current),addProApi(preve)]).then(res=>{
					this.getStoreDetail()
				}).catch(error=>{
					uni.showToast({
						title: '操作失败',
						icon: 'none'
					})
				})
			},
			moveDown(row, index){
				const current = this.roomList[index]
				const preve = this.roomList[index + 1]
				const currentSort = current.sort
				const preveSort = preve.sort
				current.sort = preveSort
				preve.sort = currentSort
				Promise.all([addProApi(current),addProApi(preve)]).then(res=>{
					this.getStoreDetail()
				}).catch(error=>{
					uni.showToast({
						title: '操作失败',
						icon: 'none'
					})
				})
			},
			handAdd() {
				uni.$u.route({
					url: 'mapPages/backAdmin/pro_add/index',
					params: {
						id: this.option.id,
						navTile: '新增产品',
						pageType: 'add'
					}
				})
			},
			handDh() {
				return uni.showToast({
					title: '待开发'
				})
				// 详情经纬度导航
				let {
					latitude,
					longitude
				} = this.storeInfo
				try {
					if (latitude && longitude) {
						uni.openLocation({
							latitude: latitude * 1,
							longitude: longitude * 1,
							success: function() {
								console.log('success');
							}
						});
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
			handShowAction(i) {
				this.currentObj = i
				this.showAction = true
			},
			// 查看详情
			handInfo(i) {
				this.$nextTick(() => {
					uni.$u.route({
						url: 'mapPages/backAdmin/pro_detail/index',
						params: {
							id: i.id,
							navTile: '查看详情',
							pageType: 'detail'
						}
					})
				})
			},
			handAction(index) {
				let { type } = this.actionlist.filter((i, s) => index == s)[0]
				if (type == 1) {
					this.handInfo(this.currentObj)
				}
				if (type == 2) {
					// 编辑
					this.$nextTick(() => {
						uni.$u.route({
							url: 'mapPages/backAdmin/pro_add/index',
							params: {
								id: this.currentObj.id,
								navTile: this.currentObj.name,
								pageType: 'edit'
							}
						})
					})
				}
				if (type == 100) {
					uni.showModal({
						title: '提示',
						content: `确认删除${this.currentObj.name}吗?`,
						confirmText: '确定删除',
						cancelText: '取消',
						success: async (res) => {
							if (res.confirm) {
								await delProApi({
									id: this.currentObj.id
								})
								uni.showToast({
									title: '删除成功',
									icon: 'none'
								})
								this.getProList()
							} else if (res.cancel) {

							}
						},
					});
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	:root {
		--theme-bg-color: #1abc9c;
	}

	.content {
		width: 100vw;
		height: 100vh;
		background-color: #F0F0F0;
		flex-direction: column;
		overflow-y: auto;

		.info {
			width: 100%;
			padding: 0 26rpx 26rpx;
			transform: translateY(-80rpx);
			box-sizing: border-box;

			._adr {
				flex-direction: column;
				flex: 1;
			}

			._dh {
				width: 100rpx;
				text-align: right;
			}
		}

		._li {
			background-color: #fff;
			border-radius: 14rpx;
			margin-bottom: 26rpx;
			overflow: hidden;
		
			._info {
				flex-direction: column;
				box-sizing: border-box;
				flex: 1;
				padding: 0 0 0 20rpx;
		
				._move {
					width: 80rpx;
					text-align: right;
				}
		
				._zt_1 {
					color: $uni-color-primary;
				}
			}
		}
	}
</style>
